<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Date,
    default: ''
  },
  title: {
    type: String,
    default: '请选择日期'
  },
  columns: {
    type: Array,
    default: () => ([])
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
})
const emit = defineEmits(['update:modelValue'])
const showPopup = ref(false)
const handlePopup = () => {
  showPopup.value = true
}
const vModel = computed(() => props.modelValue)
const popupConfirm = (v) => {
  console.log('v', v, v.selectedValue[0], v.selectedOptions)
  showPopup.value = false
  emit('update:modelValue', Object.values(v.selectedValue).join('-'))
}

</script>

<template>
  <nut-input v-model="vModel" disabled :placeholder="placeholder" type="text" @click="handlePopup" />
  <nut-popup position="bottom" v-model:visible="showPopup">
    <nut-date-picker
        :value="modelValue"
        :title="title"
        :is-show-chinese="true"
        @confirm="popupConfirm"
    ></nut-date-picker>
  </nut-popup>
</template>

<style scoped lang="scss">

</style>
